<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content='easyui,jui,jquery easyui,easyui demo,easyui中文'/>
    <meta name="description" content='TopJUI前端框架，基于最新版EasyUI前端框架构建，纯HTML调用功能组件，不用写JS代码的EasyUI，专注你的后端业务开发！'/>
    
    <title>TopJUI前端框架 - 用户登录</title>
    
    <!-- 浏览器标签图片 -->
    <link rel="shortcut icon" href="/topjui/images/favicon.ico"/>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
    
    <style type="text/css">
        html, body {
            height: 100%;
        }

        .box {
            background: url("/topjui/images/loginBg.jpg") no-repeat center center;
            background-size: cover;

            margin: 0 auto;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .login-box {
            width: 100%;
            max-width: 500px;
            height: 400px;
            position: absolute;
            top: 50%;

            margin-top: -200px;
            /*设置负值，为要定位子盒子的一半高度*/
        }

        @media screen and (min-width: 500px) {
            .login-box {
                left: 50%;
                /*设置负值，为要定位子盒子的一半宽度*/
                margin-left: -250px;
            }
        }

        .form {
            width: 100%;
            max-width: 500px;
            height: 275px;
            margin: 10px auto 0px auto;
        }

        .login-content {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            height: 285px;
            width: 100%;
            max-width: 500px;
            background-color: rgba(255, 250, 2550, .6);
            float: left;
        }

        .input-group {
            margin: 20px 0px 0px 0px !important;
        }

        .form-control,
        .input-group {
            height: 40px;
        }

        .form-actions {
            margin-top: 30px;
        }

        .form-group {
            margin-bottom: 0px !important;
        }

        .login-title {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 10px 10px;
            background-color: rgba(0, 0, 0, .6);
        }

        .login-title h1 {
            margin-top: 10px !important;
        }

        .login-title small {
            color: #fff;
        }

        .link p {
            line-height: 20px;
            margin-top: 30px;
        }

        .btn-sm {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }

        .flag {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            font-weight: bold;
            font: 14px/normal "microsoft yahei", "Times New Roman", "宋体", Times, serif;
        }
    </style>
</head>

<body>
<div class="box">
    <div class="login-box">
        <div class="login-title text-center">
            <h1><small>TopJUI前端框架</small></h1>
        </div>
        
        <div class="login-content">
            <div class="form">
                <form class="form-horizontal" id="formID" action="/login" method="post">
                    
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input class="form-control" type="text" id="username" name="username" value="root"
                                		placeholder="用户名">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input class="form-control" type="password" id="password" name="password" value="123456"
                                		placeholder="密码">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input class="form-control" type="text" id="validateCode" name="validateCode" value="1234" style="width:70%;"
                                		placeholder="验证码"/>
                                <img id="validateCodeImg" src="/createValidateCodeImg" style="float:right;width:88px;height:40px;cursor:pointer;" />
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group form-actions">
                        <div class="col-xs-12 text-center">
                            <button type="button" id="btnSubmit" class="btn btn-sm btn-success" style="width:40%;">
                                <span class="fa fa-check-circle"></span> 登录
                            </button>
                            <button type="button" id="btnReset" class="btn btn-sm btn-danger" style="width:25%; margin-left:10px">
                                <span class="fa fa-close"></span> 重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <span class="text-danger">
                	<i class="fa fa-warning"></i> 
                	<span id="myModalMsg" th:if="${param.error} and ${session.SPRING_SECURITY_LAST_EXCEPTION} ne null" 
                		th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></span>
            	</span>
            </div>
        </div>
    </div>
</div>

<!-- 引入jQuery -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<script src="/static/plugins/jquery/jquery.cookie.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/static/plugins/bootstrap/plugins/html5shiv.min.js"></script>
<script src="/static/plugins/bootstrap/plugins/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if (navigator.appName == "Microsoft Internet Explorer" &&
            (navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
            navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
            navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
    ) {
        alert("您的浏览器版本过低，请使用360安全浏览器的极速模式或IE9.0以上版本的浏览器");
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?8bb8dc6fb1864361ecbca12c39cd1c68";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

<script type="text/javascript">
    $(function () {

		// 在页面加载完执行
    	$(document).ready(function() {
			if($("#myModalMsg").length > 0) {
            	$('#myModal').modal();
			}
	    });
    	
		//回车键触发登录
		$(window).keydown(function(event) {
			if(event.keyCode==13) {
				formSubmit();
			}
		});

		//登录按钮登录
		$("#btnSubmit").on("click", function () {
			formSubmit();
		});
		
		//重置表单
		$("#btnReset").on("click", function () {
            $("#username").val("");
            $("#password").val("");
            $("#validateCode").val("");
        });
		
		//刷新验证码
		$("#validateCodeImg").click(function() {
			$("#validateCodeImg").attr("src","createValidateCodeImg?" + Math.random());
		});
	});
	
	// 表单登录
	function formSubmit() {
		if(dataCheck()) {
            $("#formID").submit();
		}
	}
	
	// 数据校验
	function dataCheck() {
		var flag = true;
		var username = $("input[name='username']").val();
		var password = $("input[name='password']").val();
		var validateCode = $("input[name='validateCode']").val();
		if(username == null || username == "" || username == 0) {
        	$('#myModalMsg').html("用户名为空");
        	$('#myModal').modal();
        	flag = false;
		}
		else if(password == null || password == "" || password == 0) {
        	$('#myModalMsg').html("密码为空");
        	$('#myModal').modal();
        	flag = false;
		}
		else if(validateCode == null || validateCode == "" || validateCode == 0) {
        	$('#myModalMsg').html("验证码为空");
        	$('#myModal').modal();
        	flag = false;
		}
		return flag;
	}
</script>
</body>
</html>